improvement(ui): reuse Button treatments for canvas actions - #8155
BillLeoutsakosvl346 merged 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
|
Before (left) / after (right). Actual canvas action wrapper with local state; the mode-chevron/layout row uses equivalent consumer JSX. Ordinary targets remain 28px, with shared neutral hover and 5px corners. The chevron remains 20px. 
2× enlarged controls: 
Matched hover, 2× enlargement: 
Base |
 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
5a86de2
into
codex/control-fix-canvas-controls
* improvement(emcn): share ordinary action geometry in Button * improvement(ui): share canvas toolbar controls * improvement(ui): reuse Button treatments for canvas actions (#8155) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(ui): preserve canvas action hover treatment * fix(ui): retain muted canvas icon and import conventions * refactor(emcn): keep Button hover variant self-contained --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
This branch was previously deployed
1 participant
Canvas navigation actions now use Button's regular geometry and existing active/quiet treatments instead of local size, radius, padding and hover classes. The mode chevron uses the existing 20px icon treatment. Pan/zoom, mode selection, undo/redo, tooltips and refs are unchanged.
Intentional appearance differences: ordinary corners follow Button's 5px radius instead of 4px; inactive hover uses the shared neutral fill. The 20px chevron uses the shared muted icon color and 1.25 stroke. At default text size, ordinary actions remain 28px and the toolbar remains 36px. With 20px root text, the toolbar grows to 45px around 35px actions.
Validation: workspace type checks, lint, import/API audits and the full EMCN suite pass. Both design linters ran against the actual target; the full scanner removes all eight targeted overrides without adding findings. Before/after light/dark, selected/disabled, hover, keyboard activation, narrow and enlarged-text screenshots use the actual action wrapper with local state; mode-chevron/layout examples use equivalent consumer JSX. The authenticated workflow canvas and pan/zoom stores were not exercised. Review images are posted in a separate comment; artifacts and linters are outside this PR.